<template>
	<view class="orderPage">

		<view class="delivery">
			<view class="headNav">
				<uni-icons type="shop-filled" size="22" color="#EC544F"></uni-icons>				
				<text class="text">到店自提</text>
			</view>
			<view class="body">
				<view class="box">
					<view class="left">商家地址</view>
					<view class="center">						
						<view class="font">{{address}}</view>
					</view>
					<view class="right">					
					</view>
				</view>
				
				
				<view class="box" @click="clickTime">
					<view class="left">自提时间</view>
					<view class="center">						
						<view class="font" v-if="time">{{time}}</view>
						<view class="select" v-else>请选择自提时间</view>
					</view>
					<view class="right">
						<uni-icons type="forward" size="20" color="#aaa"></uni-icons>
					</view>
				</view>
				
				
				<view class="box">
					<view class="left">联系方式</view>
					<view class="center">						
						<input type="text" class="ipt" v-model="mobile" placeholder="填写手机号码，便于商家联系"
							placeholder-class="iptPlaceholder">
					</view>
					<view class="right">						
					</view>
				</view>
			</view>
		</view>

		
		<goods-list></goods-list>
		
		<view class="carLayout">
			<car-layout></car-layout>
		</view>

		<u-picker 
		ref="timePicker"
		:show="pickerShow" 
		:columns="columns"
		@change="changeHandler" 
		@confirm="confirm"
		@cancel="cancel"
		@close="cancel"
		:closeOnClickOverlay='true'
		></u-picker>
		
		
	</view>
</template>

<script>
	import {daysArr,currentTimeArr,allTimeArr} from "@/utils/tools.js"
	export default {
		name: "delivery-layout",
		data() {
			return {				
				address: "山东省济南市高新区国际会展中心1号",
				time: "",
				mobile: 18866669999,
				pickerShow:false,
				columns:[
					daysArr(),
					currentTimeArr()
				]
			}
		},
		methods: {
			clickTime(){
				this.pickerShow = true;
			},
			cancel(){
				this.pickerShow=false;
			},
			confirm(e){
				this.pickerShow=false;
				this.time = e.value.join(" / ")
			},
			//选择时间组件，滑块改变的时候
			changeHandler(e){
				const {
					columnIndex,
					index,					
					picker = this.$refs.timePicker
				} = e								
				if (columnIndex === 0) {
					if(index==0){
						picker.setColumnValues(1, currentTimeArr())
					}else{
						picker.setColumnValues(1, allTimeArr())
					}					
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.orderPage {
		padding: 30rpx;		
		.delivery {
			margin-bottom:30rpx;
			background: #fff;
			padding:30rpx;
			border-radius:20rpx;
			.headNav {
				width: 100%;
				height: 78rpx;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #EC544F;
				border-radius: 15rpx 15rpx 0 0;
				.text {
					padding-left: 5rpx;
				}
			}

			.body {
				background: #f7f7f7;
				padding: 25rpx;
				border-radius: 10rpx;
				.box {
					padding: 40rpx 20rpx;					
					border-radius: 10rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color:#333;
					border-bottom:1px solid #fff;
					&:last-child{
						border:none;
					}
					.center {
						flex: 1;
						padding: 0 20rpx 0 30rpx;
						.userinfo {
							padding-top: 10rpx;
						}
						.ipt{
							font-size: 28rpx;
						}
						.iptPlaceholder{
							color:#a7a7a7;
						}
						.select{
							color:#999;
						}
					}
				}
			}
		}
		.carLayout{
			position: fixed;
			left:0;
			bottom:0;
			width: 100%;
		}
	}
</style>